<template>
  <div class="unit-box">
    <div class="unit-title">
      <span class="unit-title-font">区域计算方案设置区-</span>
      <span class="unit-title-color">{{ state.regionName }}</span>
    </div>
    <div class="unit-body">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="洪水预报方案" name="first">
          <div class="unit-container">
            <div class="unit-edit-box" v-if="Object.keys(state.efflux).length > 0">
              <!-- <div class="unit-row">
                <span class="unit-row-font">洪水预报方案：</span>
                <span class="unit-row-font1">{{ state.efflux.areaName }}</span>
              </div> -->
              <div class="unit-row">
                <span class="unit-row-font">模型名称：</span>
                <span class="unit-row-font1">{{ state.efflux.wataMName }}</span>
              </div>
              <div class="unit-row">
                <span class="unit-row-font">模型参数：</span>
                <span class="unit-row-font2">{{ state.efflux.wataSeName }}</span>
                <span class="unit-search">查看参数详情</span>
              </div>
            </div>
            <div class="unit-edit-box" v-else>
              <div class="unit-row">
                <span class="unit-row-font">无洪水预报方案信息</span>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="河道演进方案" name="second">
          <div class="unit-container">
            <div class="unit-edit-box" v-for="(item, index) in state.reach" :key="index">
              <div class="unit-row">
                <span class="unit-row-font">河段名称：</span>
                <span class="unit-row-font1">{{ item.areaName }}</span>
              </div>
              <div class="unit-row">
                <span class="unit-row-font">模型名称：</span>
                <span class="unit-row-font1">{{ item.modName }}</span>
              </div>
              <div class="unit-row">
                <span class="unit-row-font">模型参数：</span>
                <span class="unit-row-font2">{{ item.modParams }}</span>
                <span class="unit-search">查看参数详情</span>
              </div>
            </div>
            <div class="unit-edit-box" v-if="!state.reach.length > 0">
              <div class="unit-row">
                <span class="unit-row-font">无演进河段</span>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="水工程" name="third">
          <div class="unit-container">
            <div v-if="Object.keys(state.waterObj).length > 0">
              <div class="unit-edit-box">
                <div class="unit-row">
                  <span class="unit-row-font">工程名称：</span>
                  <span class="unit-row-font1">{{ '无' }}</span>
                  <span class="unit-row-font unit-left-mge">工程类型：</span>
                  <span class="unit-row-font1">{{ state.waterObj.engType || '无' }}</span>
                </div>
                <!-- <div class="unit-row">
                  <span class="unit-row-font">模型名称：</span>
                  <span class="unit-row-font1">{{ '无' }}</span>
                </div> -->
              </div>
              <div class="unit-edit-box">
                <!-- <div class="unit-row">
                  <span class="unit-row-font">水库名称：</span>
                  <span class="unit-row-font1">{{ state.waterObj.engName }}</span>
                </div> -->
                <div class="unit-row">
                  <span class="unit-row-font">模型名称：</span>
                  <span class="unit-row-font1">{{ state.waterObj.enggMName }}</span>
                </div>
                <div class="unit-row">
                  <span class="unit-row-font">模型参数：</span>
                  <span class="unit-row-font2">{{ state.waterObj.enggSeName }}</span>
                  <span class="unit-search">查看参数详情</span>
                </div>
              </div>
            </div>
            <div class="unit-edit-box" v-else>
              <div class="unit-row">
                <span class="unit-row-font">无水工程信息</span>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
      <!-- 洪水预报方案 -->

      <!-- 河段 -->

      <!-- 水工程 -->
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import schemes008 from '@/assets/data/com_data/40501008_info.json'
import schemes009 from '@/assets/data/com_data/40501009_info.json'
const activeName = ref('first')
const state = reactive({
  efflux: {},
  reach: {},
  waterObj: {},
  regionName: '乔店水库'
})
// 按钮切换
const arrBtn = reactive(['洪水预报方案', '河道演进', '水工程'])
// 父组件拿到这个事件并且传回 blkcd,blknm
const changeData = (obj) => {
  //洪水预报方案
  state.efflux.wataMName = obj[0].wataMName
  state.efflux.wataSeName = obj[0].wataSeName
  //河道演进方案
  // state.reach.
  //水工程
  state.waterObj.enggMName = obj[0].enggMName
  state.waterObj.enggSeName = obj[0].enggSeName
  state.regionName = obj[0].schemeName
}
defineExpose({
  changeData
})
</script>

<style lang="less" scoped>
.unit-box {
  width: 100%;
  height: 100%;
  font-size: var(--content-fontsize);
  .unit-title {
    font-weight: 600;

    .unit-title-color {
      color: var(--fold-word-color);
    }
  }
  .unit-body {
    margin-top: 15px;
    width: 100%;
    height: calc(100% - 40px);
    padding: 0 0 0 20px;
    box-sizing: border-box;

    .unit-container {
      overflow-y: auto;
      height: 300px;
      padding: 0 0 10px 0;
      box-sizing: border-box;
      .unit-edit-box {
        .noData {
          margin-top: 300px;
          margin-left: 30px;
        }
        .unit-row {
          margin-top: 10px;
          .unit-row-font {
            color: #868686dc;
            letter-spacing: 3px;
            display: inline-block;
          }
          .unit-left-mge {
            margin-left: 150px;
          }
          .unit-row-font1 {
            font-weight: 600;
          }
          .unit-row-font2 {
            font-weight: 400;
          }
          .unit-search {
            margin-left: 100px;
            color: blue;
            cursor: pointer;
          }
        }
      }
    }
  }
}
</style>
